<template>

    <div @click="handelAboutClick" class="blogDetail">
        <div class="title">
            <h1>关于</h1>

        </div>
        <div class="detailBox">
            <div class="headerImg">
                <el-image :src="bingImgUrl" fit="cover">
                    <div class="image-slot" slot="error">
                        <h2>加载中</h2>
                        <i class="el-icon-picture-outline"></i>
                    </div>

                </el-image>
            </div>
            <div class="mdBox">
                <v-md-preview :text="mdText">

                </v-md-preview>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "About",

      data() {
            return {
                dailyImageUrl: 'https://cn.bing.com',
                mdText: '# 这是一个博客网站\n ## 单身可撩\n ### 感谢开源组件v-md-editor  [组件github地址](https://github.com/code-farmer-i/vue-markdown-edito)\n'
            }
        },
        computed: {
            bingImgUrl() {
                return this.$store.state.bingImageUrl.replace(/1920x1080/g, '1280x720')

            },

        },
        methods:{
            handelAboutClick() {
                this.$EventBus.$emit('AsideOpen', 'AboutClick')
                console.log('About点击')

            },
        }

    }
</script>

<style scoped>
    @media screen and (max-width: 768px) {
        .title {
            padding: 0.9375rem !important;
        }

    }

    .blogDetail {
        display: flex;
        box-sizing: border-box;
        background-color: inherit;
        width: 100%;
        flex-direction: column;
        /*padding:1.25rem;*/
        background-color: #f1f3f4;



    }

    .title {
        box-sizing: border-box;
        padding: 1.25rem;
        background-color: #f9f9f9;
    }

    .title h1 {
        font-size: 2.25rem;
        color: black;
        line-height: 1.42857143;
        font-weight: 300;
    }

    .title span {
        font-size: 0.8125rem;
    }

    .el-image {
        position: inherit;
        width: 100%;
        height: 15.625rem;
        border-radius: 0.3125rem 0.3125rem 0 0;
        z-index: 0;
        display: block;

    }

    .detailBox {
        border-radius: 0.25rem;
        padding: 1.25rem;
    }

    .mdBox {
        padding: 1.875rem !important;
        border-radius: 0 0 0.25rem 0.25rem;
        overflow: hidden;
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%);

        background-color: #fff;
    }


</style>